<template>
  <div class="FileList">
    <el-table
      :data="filelist"
      style="width: 100%">
      <el-table-column
        prop="fileName"
        label="文件名"
      >
      </el-table-column>
      <el-table-column
        prop="fileType"
        label="类型">
      </el-table-column>

      <el-table-column
        prop="fileSize"
        label="大小">
        <template slot-scope="scope">
          <span>
            {{scope.row.fileSize>1024?(scope.row.fileSize/1024).toFixed(2)+'MB':scope.row.fileSize+'KB'}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">
            <a
              :href="'http://localhost:18989/download?name='+scope.row.fileName+'&fileMd5='+scope.row.fileMd5"
              title="点击下载文件">
              下载
            </a>
          </el-button>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
export default {
  name: "FileList",
  data() {
    return {
      filelist: [],
      active: true
    }
  },
  methods: {

  },
  computed: {},
  watch: {},
  directives: {},
  filters: {},
  props: {},
  components: {},
  mounted() {
    this.$axios.get("http://localhost:18989/fileList")
      .then(res => {
        this.filelist = res.data.data;
        if (JSON.stringify(res.data).length > 2) {
          this.active = false;
        }
      })
      .catch(error => {
        console.log('出错了：' + error);
      })
  }
}
</script>

<style lang="css" scoped>
.FileList ul {
  width: 100%;
  list-style: none;
}

.FileList ul li {
  margin: 0;
}

a {
  display: block;
  text-decoration: none;
  width: 100%;
  color: #0f0f0f;
  padding: 5px 0;
}

.FileList ul li :hover {
  background-color: #EAEAEA;
  color: #FF8C69;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
}

</style>
